<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>

<!-- Each valid html page must have a head; let's create one. -->
<head>
    <!-- The following line defines content type and utf-8 as character set. -->
    <!-- If you want your application to work flawlessly with various local -->
    <!-- characters, just make ALL strings, on the page, json and database utf-8. -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!-- Ext relies on its default css so include it here. -->
    <!-- This must come BEFORE javascript includes! -->
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">

    <!-- Include here your own css files if you have them. -->

    <!-- First of javascript includes must be an adapter... -->
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>

    <!-- ...then you need the Ext itself, either debug or production version. -->
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>

    <!-- Include here your extended classes if you have some. -->

    <!-- Include here you application javascript file if you have it. -->

    <!-- Set a title for the page (id is not necessary). -->
    <title id="page-title">Title</title>

    <!-- You can have onReady function here or in your application file. -->
    <!-- If you have it in your application file delete the whole -->
    <!-- following script tag as we must have only one onReady. -->
    <script type="text/javascript">

        var xmlhttp = false;

        function initXmlHttp() {
            /*@cc_on @*/
            /*@if (@_jscript_version >= 5)
             // JScript gives us Conditional compilation, we can cope with old IE versions.
             // and security blocked creation of the objects.
             try {
             xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
             try {
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (E) {
             xmlhttp = false;
             }
             }
             @end @*/
            if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
                try {
                    xmlhttp = new XMLHttpRequest();
                } catch (e) {
                    xmlhttp = false;
                }
            }
            if (!xmlhttp && window.createRequest) {
                try {
                    xmlhttp = window.createRequest();
                } catch (e) {
                    xmlhttp = false;
                }
            }
            return xmlhttp
        }

        // Path to the blank image must point to a valid location on your server
        Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

        // Main application entry point
        Ext.onReady(function() {
            initXmlHttp()

            // write your application here
            var propsGrid = new Ext.grid.PropertyGrid({
                renderTo: 'prop-grid',
                width: 300,
                autoHeight: true,
                propertyNames: {
                    tested: 'QA',
                    borderWidth: 'Border Width'
                },
                source: {
                    '(name)': 'Properties Grid',
                    grouping: false,
                    autoFitColumns: true,
                    productionQuality: false,
                    created: new Date(Date.parse('10/15/2006')),
                    tested: false,
                    version: 0.01,
                    borderWidth: 1
                },
                viewConfig : {
                    forceFit: true,
                    scrollOffset: 2 // the grid will never have scrollbars
                }
            });

            // simulate updating the grid data via a button click
            new Ext.Button({
                renderTo: 'button-container',
                text: 'Next',
                handler: function() {

                    // send the edited cookie data and receive the response
                    xmlhttp.open("POST", "http://localhost:8088/servlets/cookie", true);
                    xmlhttp.onreadystatechange = function() {
                        if (xmlhttp.readyState == 4) {
                            var jsonResponse = xmlhttp.responseText
                            //alert("Response:" + xmlhttp.responseText)

                            // The native JSON support does not convert any formatted date to date object.
                            // It must be done manually using this reviver function.

                            var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/;
                            var reMsAjax = /^\/Date\((d|-|.*)\)\/$/;

                            var myObject = JSON.parse(jsonResponse, function(key, value) {
                                if (typeof value === 'string') {
                                    var a = reISO.exec(value);
                                    if (a)
                                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
                                    a = reMsAjax.exec(value);
                                    if (a) {
                                        var b = a[1].split(/[-,.]/);
                                        return new Date(+b[0]);
                                    }
                                }
                                return value;
                            });
                            //alert("JSON parser is present:" + myObject);
                            propsGrid.setSource(myObject);
                            //                  propsGrid.setSource({
                            //                      '(name)': 'Property Grid',
                            //                      grouping: false,
                            //                      autoFitColumns: true,
                            //                      productionQuality: true,
                            //                      created: new Date(),
                            //                      tested: false,
                            //                      version: 0.8,
                            //                      borderWidth: 2
                            //                  });

                        }
                    }

                    var JSONcookie = JSON.stringify(propsGrid.getSource());
                    //alert("JSON cookie:" + JSONcookie)

                    xmlhttp.send(JSONcookie)

                }
            });

        });
    </script>

    <!-- Close the head -->
</head>

<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body>

<form>
    <textarea rows="10" cols="20" id="jsonArea"></textarea>
    <input type="button" value="Evaluate">
</form>

<h1>Property Grid Example</h1>

<p>This example shows how to create a <a href="http://extjs.com/deploy/dev/docs/?class=Ext.grid.PropertyGrid">Property
    Grid</a>.</p>

<p>Note that the js is not minified so it is readable.</p>


<p id="button-container"></p>

<div id="prop-grid"></div>
</body>

<!-- Close html tag at last -->
</html>